<template>
  <div class="simple-course">
    <svg class="icon" aria-hidden="true">
      <use :xlink:href="iconName[course.xdzt - 1]"></use>
    </svg>
    <!-- 左侧 -->
    <div class="left">
      <div class="left-top">
        <span class="course-name">{{course.kcmc}}</span>
      </div>
      <div class="left-bottom">
        <span class="year">{{course.xnmc}}</span>
        <span class="xs">{{course.xsxxxx}}</span>
      </div>
    </div>
    <!-- 右侧 -->
    <div class="right" :style="{'color': color}">
      <span :style="{'background-color': bgColor}" v-if="course.xdzt === 4">成绩:{{course.maxcj}}</span>
      <span :style="{'background-color': bgColor}" v-if="course.xdzt === 4">绩点:{{course.jd}}</span>
      <span :style="{'background-color': bgColor}">学分:{{course.xf}}</span>
    </div>
  </div>
</template>

<script>
  // 引入图标
  import '@/assets/js/symbol.js'

  export default {
    name: 'SimpleCourse',
    data() {
      return {
        iconName: ['#icon-jinhangzhong', '#icon-weiwancheng', '#icon-renwuweikaishizhuangtai', '#icon-wancheng']
      }
    },
    props: {
      course: {
        type: Object,
        default() {
          return {}
        }
      }
    },
    computed: {
      // 标签背景色
      bgColor() {
        let colors = ['#eedeb0', '#ffb3a7', '#e0f0e9', '#c0ebd7']
        return colors[this.course.xdzt - 1]
      },
      // 标签字体色
      color() {
        let colors = ['#a78e44', '#f56c6c', '#909399', '#057748']
        return colors[this.course.xdzt - 1]
      }
    }
  }
</script>

<style scoped>
  .icon {
    width: 2em; height: 2em;
    vertical-align: -0.15em;
    fill: currentColor;
    overflow: hidden;
    position: absolute;
    left: 4px;
    top: calc(50% - 1em);
  }

  .simple-course {
    margin: 10px 0;
    width: 100%;
    height: 100px;
    box-shadow: 3px 3px 5px rgba(100, 100, 100, 0.2);
    position: relative;
    background-color: #f2f6fc;
  }

  .left {
    position: absolute;
    left: calc(4px + 2em);
    height: 100px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-left: 10px;
    font-size: 16px;
    font-weight: 600;
  }

  .year {
    margin-right: 10px;
  }

  .right {
    position: absolute;
    right: 0;
    height: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .right span {
    margin: 0 10px;
    padding: 5px;
    border-radius: 10px;
  }
</style>